// 根据设备像素比展示同一张对应像素比图片
/* .logo{
    width: 55px;
    height: 53px;
    background-image:url(images/logo.png);
    background-size:100% 100%;

    @media screen {
        @media (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2){
            background-image: url(images/logo@2x.png);
            background-size:100% 100%;
        }

        @media (-webkit-min-device-pixel-ratio:3), (min-device-pixel-ratio:3){
            background-image: url(images/logo@3x.png);
            background-size:100% 100%;
        }
    }
} */

.bg-img(@path,@img-name,@wSize,@hSize){
    width: @wSize;
    height: @hSize;
    background-image:url("@{path}/@{img-name}.png");
    background-size:@wSize @hSize;

    @media screen {
        @media (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2){
            background-image:url("@{path}/@{img-name}@2x.png");
            background-size:@wSize @hSize;
        }

        @media (-webkit-min-device-pixel-ratio:3), (min-device-pixel-ratio:3){
            background-image:url("@{path}/@{img-name}@3x.png");
            background-size:@wSize @hSize;
        }
    }
}

.logo{
    .bg-img("./images","logo",55px,53px);
}